<template>
  <section class="indexslider slider" data-sizes="50vw">
    <div class="bannertu" v-for="(item, index) in rotation" :key="index">
      <img :src="item.cover | pathImg" />
      <div class="bannerfont">
        <div class="bfont">{{ item.title }}</div>
      </div>
    </div>
  </section>
</template>

<script>
import { isMobile } from '@/common/util'
export default {
  name: 'HomeTeam',

  props: {
    rotation: {
      type: Array
    }
  },
  watch: {
    rotation() {
      this.$nextTick(() => {
        this.initSlick()
      })
    }
  },
  methods: {
    initSlick() {
      let isArrows = isMobile()
      $(".indexslider").slick({
        lazyLoad: 'ondemand', // ondemand progressive anticipated
        dots: true,
        autoplay: false,
        infinite: true,
        arrows: !isArrows,
        responsive: [
          {
            breakpoint: 480,
            settings: {
              arrows: false,
              centerMode: false,
              slidesToShow: 1
            }
          }
        ]
      });
    }
  },
  mounted() {
  }
}
</script>
<style>
/* @import url("./style.css"); */
.slick-prev {
  left: 20px;
}
.slick-next {
  right: 20px;
}
.indexslider .slick-prev:before,
.indexslider .slick-next:before {
  font-family: "iconfont" !important;
  font-style: normal;
  font-size: 32px;
  line-height: 1;
  opacity: 0.75;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev:before {
  content: "\e6c0";
}
.slick-next:before {
  content: "\e6c3";
}
.bannertu {
  position: relative;
}

.bannerfont {
  position: absolute;
  bottom: 1em;
  width: 100%;
  text-align: center;
}

.bfont {
  /* background-color: rgba(35, 56, 118, 0.7); */
  /* background: linear-gradient(to right,#00CCFF, #32CC68); */
  opacity: 0.7;
  display: inline-block;
  padding: 15px 25px;
  color: #000;
  font-size: 22px;
}

@media (max-width: 768px) {
  .bannerfont {
    bottom: 14px;
  }

  .bfont {
    font-size: 13px;
    padding: 2px 5px;
  }
}
</style>
